<script setup>
// #ifdef H5
import {BaseImgUrl} from "../utils/lshttp";
import {ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import wx from 'weixin-js-sdk'
import * as uniWebView from "@dcloudio/uni-webview-js";
import {challengeAPI, challengeNumAPI, joinChallengePI, userJoinChallengeAPI} from "../services/lstz";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {getTime} from "../utils/date";
import {showTip} from "../utils/conUtils";
import Start_task from "./start_task.vue";
// #endif

const userInfoStore = useUserInfoStore()
const showJoin = ref(false)
const city = ref()
const optionsData = ref()
const webviewStyles = ref({
  progress: {
    color: '#FF3333'
  }
})

onLoad((options) => {
  city.value = options.city
  optionsData.value = options
  if (options?.userId) {
    userInfoStore.setUserId(options.userId)
  } else {
    if (userInfoStore.isLogin()) {
      userInfoStore.setUserId(userInfoStore.userInfo.id)
    }
  }
  getChallengeNumAPI()
})
onShow(() => {
  if (userInfoStore.userId) {
    getChallengeAPI(userInfoStore.userId)
    getUserJoinChallengeAPI(userInfoStore.userId)
  }
})
const back = (iaTab, path) => {
  // #ifdef H5
  let siToPAge = false
  uniWebView.webView.getEnv(function (res) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境1" + JSON.stringify(res), icon: "none"})
    if (res.plus) {
      if (iaTab) {
        uniWebView.webView.switchTab({
          url: path
        })
      } else {
        uniWebView.webView.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  wx.miniProgram.getEnv(function (env) {
    // console.log('当前环境：' + JSON.stringify(res));
    // uni.showToast({title: "当前环境2" + JSON.stringify(res), icon: "none"})
    if (env['miniprogram'] == true) {
      if (iaTab) {
        wx.miniProgram.switchTab({
          url: path
        })
      } else {
        wx.miniProgram.navigateTo({
          url: path
        });
      }
      siToPAge = true
    }
  });
  if (siToPAge === false) {
    if (iaTab) {
      uni.switchTab({
        url: path
      })
    } else {
      uni.navigateTo({
        url: path
      });
    }
  }
  // #endif
}
const challengeList = ref([])
const getChallengeAPI = async () => {
  const res = await challengeAPI(city.value, userInfoStore.userId)
  challengeList.value = res.result
}
const userJoinChallenge = ref([])
const getUserJoinChallengeAPI = async () => {
  const res = await userJoinChallengeAPI(1, 1, 10, userInfoStore?.userId)
  userJoinChallenge.value = res.result
}

const giveUpTask = (remItem) => {
  userJoinChallenge.value = userJoinChallenge.value.filter(item => item !== remItem);
}

const currentJoinItem = ref({})
const fire_join = (item) => {
  showJoin.value = true
  currentJoinItem.value = item
}

const countData = ref({})
const successList = ref([])
const getChallengeNumAPI = async () => {
  const res = await challengeNumAPI(userInfoStore.userId, city.value)
  countData.value = res.result
  countData.value?.list.forEach((item) => {
    successList.value.push(item.message)
  })
}

const check_on = ref(0)
const check_icon = () => {
  if (check_on.value === 1) {
    check_on.value = 0
  } else {
    check_on.value = 1
  }
}

// 点击挑战规则
const lsgz = () => {
  uni.navigateTo({url: "challengeRule?type=3"})
}

// 点击立即报名
const immediately = async () => {
  if (check_on.value === 0) {
    await uni.showToast({title: "请认真阅读并同意挑战规则", icon: "none"})
    return
  }
  showJoin.value = false
  await joinChallengePI(currentJoinItem.value.id, userInfoStore.userId)
  await uni.showToast({title: '报名成功', icon: "none", duration: 3000})
  await getUserJoinChallengeAPI()
}
const toMyJoin = () => {
  uni.navigateTo({url: "my_join?reseller_id=" + countData.value?.reseller_id})
}

// const data1 = ref([
//   {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }, {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }, {
//     "date": "2024.04.15 18:36",
//     "money": 7,
//     "type": 0,
//     "title": "惊喜7天打卡挑战",
//     "sub_title": "连续7天下单 可获得7米",
//     "endTime": "剩余时间 2天23:23:59",
//     "percent": 50,
//     "join_count": 39625
//   }
// ])
</script>
<template>
  <!-- 页面整体布局，顶部设置负边距以适应设计需求 -->
  <view style="margin-top: -68px">
    <!-- 背景图片容器，设置相对定位 -->
    <view style="position: relative">
      <!-- 背景图片，绝对定位覆盖整个容器 -->
      <view style="position: absolute;z-index: 0;top: 0;right: 0;width: 100% ;height: 710rpx">
        <image :src="BaseImgUrl+'/challenge/background_top.png'" style="width: 100% ;height: 100%"></image>
      </view>
    </view>
    <!-- 标题图片，设置内边距以适应设计需求 -->
    <view style="padding-top: 174rpx">
      <!-- 子标题图片 -->
      <image :src="BaseImgUrl+'/challenge/title_sub.png'"
             style="width: 194rpx ;height: 62rpx;display: block;margin-left: 116rpx"></image>
      <!-- 主标题图片 -->
      <image :src="BaseImgUrl+'/challenge/title.png'"
             style="width: 482rpx ;height: 166rpx;display: block;margin-left: 28rpx"></image>
    </view>

    <!-- 成功通知栏，显示挑战成功信息 -->
    <view class="notice_bar">
      <u-notice-bar icon="" bgColor="#FFBB5500" direction="column" duration="3000" :disableTouch="true"
                    color="#000" fontSize="24rpx" :text="successList"></u-notice-bar>
    </view>

    <!-- 城市信息和统计数据展示区域 -->
    <view class="city_box">
      <!-- 城市信息 -->
      <view class="city">
        <view class="label">
          领食周边购
        </view>
        <view class="city_text">
          {{ countData?.city || '定位中' }}
        </view>
      </view>
      <!-- 统计数据 -->
      <view class="data_count">
        <!-- 累计发放奖金 -->
        <view class="money">
          <view class="money_box">
            <text class="money_count">{{ countData?.total_money }}</text>
            <text class="yuan">元</text>
          </view>
          <view class="bottom_title">
            累计发放奖金
          </view>
        </view>
        <!-- 分隔线 -->
        <view class="data_count_line"></view>
        <!-- 累计挑战人数 -->
        <view class="people">
          <view class="money_box">
            <text class="money_count">{{ countData?.total_people }}</text>
            <text class="yuan">人</text>
          </view>
          <view class="bottom_title">
            累计挑战人数
          </view>
        </view>
      </view>
    </view>

    <!-- 正在参与的挑战任务列表 -->
    <view class="task_box" v-if="userJoinChallenge.length>0">
      <!-- 任务背景图片 -->
      <image :src="BaseImgUrl+'/challenge/start_task.png'"
             style="width: 710rpx ;height: 242rpx;display: block;position: absolute"></image>
      <!-- 任务标题 -->
      <view class="task_title" style="padding-top: 32rpx">挑战中活动</view>
      <!-- 任务列表 -->
      <view style="height: 32rpx"></view>
      <view class="task_item_content">
        <view v-if="userJoinChallenge.length>0" v-for="(item,index) in userJoinChallenge" :key="index">
          <view style="position: relative">
            <!-- 使用自定义组件展示任务详情 -->
            <start_task :isLast="userJoinChallenge.length-1===index" :item="item"
                        @giveUpTask="giveUpTask(item)"
                        :city="{'city':countData?.city,'reseller_id':countData?.reseller_id}">
            </start_task>
          </view>
        </view>
      </view>
    </view>

    <!-- 可参与的挑战任务列表 -->
    <view class="task_box" style="margin-top: 16rpx" v-if="challengeList.length>0">
      <!-- 任务背景图片 -->
      <image :src="BaseImgUrl+'/challenge/task.png'"
             style="width: 710rpx ;height: 242rpx;display: block;position: absolute"></image>
      <!-- 任务标题 -->
      <view class="task_title">惊喜挑战 奖金补贴</view>
      <!-- 任务列表 -->
      <view style="height: 32rpx"></view>
      <view class="task_item_content" style="position: relative">
        <view v-for="(item,index) in challengeList" :key="index">
          <view class="item_content">
            <!-- 任务报名截止时间 -->
            <view style="display: flex;align-items: center">
              <text class="bm_end_time">报名截止时间：{{ item.end_time }}</text>
              <!-- 火焰图标 -->
              <image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>
              <!-- 已参与人数 -->
              <text class="join_count">{{ item.join_count || 0 }}人已参与</text>
            </view>
            <!-- 任务奖励金额 -->
            <view class="money_bg_content">
              <view style="position: relative">
                <image class="money_bg"
                       :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
                <view class="money_text">
                  <text>{{ item.money }}</text>
                  <text style="font-size: 32rpx">元</text>
                </view>
              </view>
              <!-- 任务详情 -->
              <view style="width: 20rpx"></view>
              <view style="margin-top: 20rpx;width: 100%">
                <!-- 任务标题 -->
                <view style="font-weight: bold;font-size: 32rpx;color: #333333;line-height: 24rpx;">{{ item.title }}</view>
                <!-- 任务描述 -->
                <view style="font-size: 28rpx;color: #888888;margin-top: 20rpx">
                  {{ item.descript +"" }}&nbsp;
                </view>
                <!-- 报名按钮 -->
                <view style="display: flex;margin-top: 10rpx">
                  <view style="flex: 1"></view>
                  <view :class="getTime(item?.apply_start_time, item?.apply_end_time) ? 'go_buy':'go_buy1'"
                        @click="getTime(item?.apply_start_time, item?.apply_end_time)?fire_join(item):showTip('当前时间段不可报名')"
                        v-if="item?.sub_type === 1 && item.apply_start_time !== null && item.apply_start_time !== 'null'">
                    {{
                      item.sub_type === 1 ? (getTime(item?.apply_start_time, item?.apply_end_time) ? '免费报名' : '报名时间 ' + item?.apply_start_time + ' ~ ' + item?.apply_end_time) : '免费报名'
                    }}
                  </view>
                  <view class="go_buy" @click="fire_join(item)" v-else>
                    免费报名
                  </view>
                </view>
              </view>
            </view>
            <!-- 分隔线 -->
            <view style="height: 10rpx"></view>
          </view>
          <!-- 分隔线 -->
          <view style="height: 20rpx" v-if="index !== challengeList.length - 1"></view>
        </view>
      </view>
    </view>
    <!-- 保留底部空间 -->
    <view style="min-height: 168rpx;">
    </view>
    <!-- 安全底部区域 -->
    <u-safe-bottom></u-safe-bottom>
    <!-- 页面底部导航栏 -->
    <view class="bottom">
      <view style="display: flex;align-items: center;">
        <!-- 首页按钮 -->
        <view style="font-size: 26rpx;width: 100rpx;text-align: center" @click="back(true,'/pages/index/index')">
          <image style="width: 48rpx;height: 48rpx" :src="BaseImgUrl + '/once/lstz/index.png'"></image>
          <view>首页</view>
        </view>
        <!-- 分隔符 -->
        <view style="flex: 1"></view>
        <!-- 领取奖励按钮 -->
        <image style="width: 328rpx;height: 136rpx;margin-top: -25rpx"
               :src="BaseImgUrl + '/once/lstz/qshqty.gif'" @click="back(false,'/pages/makemoney/getmaker')"></image>
        <!-- 加入群聊按钮 -->
        <view class="join_qu" @click="back(false,'/pages/share/vipgroup')">
          进群领专享福利
        </view>
      </view>
      <!-- 安全底部区域 -->
      <u-safe-bottom></u-safe-bottom>
    </view>
    <!-- 规则按钮，固定在页面右侧 -->
    <view
        style="position: fixed;z-index: 199;right: -2px;bottom: 68%;;border-radius: 13rpx; box-shadow: -1px -0 2px 2px rgba(0, 0, 0, 0.05);"
        @click="lsgz">
      <image style="width: 38rpx;height: 80rpx"
             :src="BaseImgUrl + '/once/lstz/rule.png'"></image>
    </view>
    <!-- 我的任务按钮，固定在页面右侧 -->
    <view style="width: 128rpx;height: 128rpx;;position: fixed;z-index: 199;right: -20rpx;bottom: 38%;"
          @click="toMyJoin">
      <image style="width: 158rpx;height: 158rpx;;margin: -30rpx" mode="heightFix"
             :src="BaseImgUrl + '/once/lstz/my_task.png'"></image>
    </view>
  </view>
  <!-- 报名弹框 -->
  <u-popup
      :show="showJoin"
      :round="10"
      mode="bottom"
      @close="showJoin = false"
      closeable
  >
    <view class="pop-root">
      <!-- 任务奖励金额 -->
      <view class="money_bg_content" style="margin: 28rpx 28rpx 20rpx; height: 176rpx;">
        <view style="position: relative">
          <image class="money_bg"
                 :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
          <view class="money_text">
            <text>{{ currentJoinItem.money || 0 }}</text>
            <text style="font-size: 32rpx">元</text>
          </view>
        </view>
        <!-- 任务详情 -->
        <view style="width: 20rpx"></view>
        <view style="margin-top: 10rpx">
          <!-- 任务标题 -->
          <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold;margin-top: 20rpx">
            {{ currentJoinItem.title || '' }}
          </view>
          <!-- 任务描述 -->
          <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">
            {{ currentJoinItem.descript || '' }}
          </view>
        </view>
      </view>
      <!-- 分隔线 -->
      <view class="box-title-line"></view>
      <!-- 报名须知 -->
      <view class="join_content">
        <view class="bgTitle-box">
          <scroll-view scroll-y="true" style="height: 680rpx;">
            <!-- 活动开始时间 -->
            <view style="margin-top: 20rpx"></view>
            <view class="join_title">
              报名须知
            </view>
            <view class="activity_item">
              <text class="activity_time_title">活动开始时间
              </text>
              <text class="activity_time"> {{ currentJoinItem.start_time || '无' }}</text>
            </view>
            <!-- 报名截止时间 -->
            <view class="activity_item">
              <text class="activity_time_title">报名截止时间
              </text>
              <text class="activity_time"> {{ currentJoinItem.end_time || '无' }}</text>
            </view>
            <!-- 任务完成时长 -->
            <view class="activity_item">
              <text class="activity_time_title">任务完成时长
              </text>
              <text class="activity_time">{{ currentJoinItem.date || '无' }}天</text>
            </view>
            <!-- 挑战奖励 -->
            <view class="activity_item">
              <text class="activity_time_title">挑战奖励
              </text>
              <text class="activity_time">{{ currentJoinItem.money || '0' }}元</text>
            </view>
            <!-- 分隔线 -->
            <view class="box-title-line"></view>
            <!-- 挑战要求 -->
            <view class="join_title" style="margin-top: 20rpx">
              挑战要求
            </view>
            <!-- 指定城市可参与 -->
            <view class="activity_item">
              <text class="activity_time_title">指定城市可参与
              </text>
              <text class="activity_time">{{ currentJoinItem.city || '无限制' }}</text>
            </view>
            <!-- 指定下单时段 -->
            <view class="activity_item">
              <text class="activity_time_title">指定下单时段
              </text>
              <text class="activity_time">{{ currentJoinItem.task_time || '无限制' }}</text>
            </view>
            <!-- 分隔线 -->
            <view class="box-title-line"></view>
            <!-- 注意事项 -->
            <view class="join_title" style="margin-top: 20rpx;margin-bottom: 20rpx;color: #F9692A;font-weight: normal">
              注意事项：
            </view>
            <!-- 解析注意事项内容 -->
            <u-parse :content="currentJoinItem.notice"></u-parse>
            <!-- 保留底部空间 -->
            <view style="height: 60rpx">
            </view>
          </scroll-view>

        </view>
      </view>
      <!-- 底部内容 -->
      <view class="bottom_content">
        <!-- 协议复选框 -->
        <view class="protocol">
          <view class="dianji" @tap="check_icon()">
            <image v-if="check_on === 0" class="check_icon"
                   :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
            <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
          </view>
          <!-- 协议文本 -->
          <view style="color: #1f2f34;font-size: 22rpx">
            我已阅读并同意《
            <text @click.stop="lsgz" style="color: #00b1ff">领食周边购挑战赛规则</text>
            》
          </view>
        </view>
        <!-- 立即报名按钮 -->
        <view class="immediately" @click="immediately">
          立即报名
        </view>
      </view>
    </view>
  </u-popup>
</template>


// 优化挑战赛页面，处理定位城市过长问题，优化参加人数及发放奖励数值过长问题，优化UI大小及样式
<style lang="scss">
page {
  background: #fcf1cc;
  background-size: 100%;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
</style>
<style scoped lang="scss">
.notice_bar {
  margin-left: 20rpx;
  margin-top: 30rpx;
  position: relative;
  border-radius: 60rpx;
  background: linear-gradient(90deg, #FDB0A2 0%, rgba(253, 208, 186, 0) 80%);
}

.city_box {
  position: relative;
  width: 710rpx;
  height: 140rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
  display: flex;
  background: linear-gradient(95deg, #FF4253 0%, #FFA537 100%);

  .city {
    width: 200rpx;
    height: 120rpx;
    border-radius: 20rpx;
    margin: 10rpx;
    background: linear-gradient(180deg, #FFFFFA 0%, #FFF1AF 100%);
  }

  .data_count {
    width: 480rpx;
    height: 120rpx;
    margin: 10rpx 10rpx 10rpx 0;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #FFFFFA 0%, #FFF1AF 100%);

    .data_count_line {
      height: 88rpx;
      border: #E89E33 1px dashed;
    }

    .money {
      flex: 1;
      text-align: center;
    }

    .people {
      flex: 1;
      text-align: center;
    }

    .money_box {
      margin-top: 10rpx;
      color: #FD4806;
    }

    .money_count {
      font-weight: bold;
      font-size: 35rpx;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .yuan {
      margin-left: 3rpx;
      font-size: 26rpx;
      line-height: 24rpx;
    }

    .bottom_title {
      width: 100%;
      font-weight: 400;
      font-size: 26rpx;
      color: #C27305;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

  .label {
    width: 140rpx;
    height: 42rpx;
    line-height: 42rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #D06236;
    text-align: center;
    font-style: normal;
    text-transform: none;
    background: #FFF49C;
    border-radius: 20rpx 0 20rpx 0;
  }

  .city_text {
    width: 100%;
    height: 44rpx;
    margin-top: 18rpx;
    line-height: 44rpx;
    font-weight: bold;
    font-size: 35rpx;
    color: #FD4806;
    text-align: center;
    text-transform: none;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.task_box {
  position: relative;
  margin-left: 20rpx;
  margin-top: 26rpx;
  min-height: 242rpx;
  width: 710rpx;
  background: #fde8a2;
  border-radius: 30rpx;

  .task_item_content{
    padding-bottom: 20rpx;
    width: 710rpx;
    background: linear-gradient(94deg, #FD6661 0%, #FFB760 100%);
    border-radius: 30rpx;
  }

  .task_title {
    position: relative;
    font-weight: 400;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 40rpx;
    text-align: left;
    padding-top: 48rpx;
    margin-left: 20rpx;
  }

  .task_item {
    position: relative;
    margin-left: 20rpx;
    width: 670rpx;
    height: 400rpx;
    border-radius: 20rpx;
    background: #FFFFFF;
  }
}


.data_count {
  width: 564rpx;
  margin-left: 93rpx;
  height: 146rpx;
  position: relative;

  .data_bg {
    width: 564rpx;
    height: 146rpx;;
    position: absolute;
    z-index: 2
  }

  .data_content {
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .data_text {
      z-index: 100;
      position: relative;
      width: 100%;
      height: 88rpx;
      line-height: 48rpx;
      color: white;
      font-size: 32rpx
    }
  }
}

.tzing {
  width: 564rpx;
  margin-left: 93rpx;
  height: 56rpx;
  margin-top: 6rpx;
  position: relative;

  .tzing_bg {
    width: 564rpx;
    height: 56rpx;
    z-index: 2;
    bottom: 0;
  }

  .tzing_bg1 {
    width: 388rpx;
    height: 48rpx;
    margin-top: 6rpx;
    margin-left: 88rpx;
    z-index: 2;
    bottom: 0;
  }
}

.item_content {
  margin: 0 20rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 10rpx;

  .bm_end_time {
    font-size: 24rpx;
    color: #6B0C03;
    flex: 1;
    height: 48rpx;
    line-height: 48rpx;
    padding-left: 10rpx;
    border-radius: 20rpx 0 0 0;
    background: linear-gradient(90deg, #FFDFD9 0%, rgba(254, 212, 187, 0) 100%);
  }

  .join_count {
    font-size: 26rpx;
    color: #888888;
    margin-right: 10rpx;
  }

  .fire {
    width: 31rpx;
    height: 31rpx;
    margin-bottom: 3rpx;
  }
}

.money_bg_content {
  margin-top: 20rpx;
  position: relative;
  display: flex;

  .money_bg {
    width: 140rpx;
    height: 176rpx;
    position: absolute;
    z-index: 1;
    border-radius: 0;
  }

  .money_text {
    color: #ff5c14;
    font-weight: bold;
    font-size: 49rpx;
    z-index: 100;
    position: relative;
    width: 140rpx;
    text-align: center;
    line-height: 120rpx;
  }
}

.fq_tz {
  width: 160rpx;
  height: 64rpx;
  background: #FFFFFF;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  border: 2rpx solid #E5E5E5;
  text-align: center;
  line-height: 64rpx;
  color: #888888;
  font-size: 26rpx
}

.go_buy {
  height: 58rpx;
  width: 140rpx;
  padding: 0 16rpx;
  background: linear-gradient(90deg, #FF4E5E 0%, #FFB760 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 24rpx
}

.go_buy1 {
  height: 58rpx;
  padding: 0 18rpx;
  background: linear-gradient(270deg, #dee9ea 0%, #d9d9e6 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #3D3D3D;
  font-size: 24rpx
}

.jxtzbt_conten {
  width: 750rpx;
  height: 268rpx;
  position: relative;

  .jxtzbt_bg0 {
    width: 750rpx;
    height: 268rpx;
    position: absolute;
  }

  .jxtzbt_bg1 {
    width: 468rpx;
    height: 76rpx;
    left: 144rpx;
    margin-top: 84rpx;
    z-index: 100;
    position: relative;
  }

}

.bottom {
  padding: 10rpx 20rpx 0 20rpx;
  position: fixed;
  bottom: 0;
  z-index: 199;
  background-color: white;

  .join_qu {
    width: 280rpx;
    height: 90rpx;
    background: linear-gradient(64deg, #FC754A 0%, #FEBC5B 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    color: white;
    font-weight: bold;
    font-size: 28rpx;
    text-align: center;
    line-height: 90rpx
  }
}

.box-title-line {
  height: 2rpx;
  background-color: #F1F1F1;
}

.join_content {
  margin: 0 38rpx;
}

.immediately {
  font-weight: 400;
  font-size: 32rpx;
  color: #FFFFFF;
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  letter-spacing: 10rpx;
  text-align: center;
  background: linear-gradient(270deg, #FC754A 0%, #FEBC5B 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  box-shadow: 0 0 18rpx #FC754A;
}

.activity_time_title {
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 64rpx;
}

.activity_time {
  font-weight: 400;
  font-size: 24rpx;
  color: #3D3D3D;
  line-height: 64rpx;
}

.activity_item {
  display: flex;
  justify-content: space-between;
}

.join_title {
  font-weight: bold;
  font-size: 26rpx;
  color: #333333;
  line-height: 28rpx;;
  margin-bottom: 10rpx;
}


.protocol {
  color: #999;
  display: flex;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.check_icon {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;

  image {
    border-radius: 100rpx;
  }
}

.bottom_content {
  box-shadow: -3rpx -3px 2px 1px rgba(66, 66, 66, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.title {
  z-index: 1;
  position: absolute;
  top: 58rpx;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 26rpx;
}
</style>
